
import React, { useCallback, useState, useContext, forwardRef, useEffect } from 'react'
import CustomizeModal, { CustomizeModalButton, CustomizeModalContext } from "@common/presentational/CustomizeModal";
import PaymentSuccessSvg from '@assets/svg/paymentSuccess.svg'
import { Steps, Button } from "antd";
import BilinIcon from "@common/presentational/BilinIcon";
const { Step } = Steps;
import QRCode from 'qrcode.react'
import dayjs from 'dayjs'
const STATUS = {
    1:'资料校验中',
    2:'待账户验证',
    3:'审核中',
    5:'待商户签约',
    8:'待激活',
    6:'支付账号申请成功',
}
const INTRO = {
    1:'预计1-2个工作日完成审核，请等待审核结果',
    2:'预计1-2个工作日完成审核，请等待审核结果',
    3:'预计1-2个工作日完成审核，请等待审核结果',
    5:'法人/经营者微信扫码，完成验证。（10天有效期）',
    8:'后台工作人员将在1个工作日内激活账号，请耐心等待',
    6:'可前往“收款配置”，将账号绑定在所需的订单场景中'
}
const ProcessContent = props => {
    const { hide, params } = useContext(CustomizeModalContext)
    const [ current, setCurrent ] = useState(0) 
    const { status, wx_applyment_id, update_time, sign_url  } = params
    useEffect(()=>{
        if(status ===3 || status ===1  || status ===2){
            setCurrent(1)
        }
        if(status ===5){
            setCurrent(2)
        }
        if(status ===6){
            setCurrent(4)
        }
        if(status ===8){
            setCurrent(3)
        }
    },[])
    return (
        <div className='process-modal'>
            <Steps current={current}>
                <Step title="提交资料" />
                <Step title="平台审核" />
                <Step title="商户签约" />
                <Step title="账号激活" />
                <Step title="账号生效" />
            </Steps>
            { status === 6 ? <div className='flex-center'>
                <PaymentSuccessSvg className='payment-success-img' />
            </div> : null}
            <div className='flex-center mgb-24 process-modal-title'>
                <div className='ft-clr-d ft-16 mgt-36'>{current ===1 || current === 2 ? <BilinIcon style={{color:'#10AEFF'}} type="pending" className="mgr-4" /> : null}{STATUS[status]}</div>
                <div className='ft-clr-l ft-12 mgt-12'>{INTRO[status]}</div>
            </div>
            { status === 5 ? <div className='flex-center mgb-24 process-modal-title'>
                    <QRCode value={sign_url}   size={188}/>
            </div> : null}
            <div className='bg-f5 process-modal-intro'>
                <div className='ft-clr-l ft-12'>业务申请编号：{wx_applyment_id}</div>
                <div className='ft-clr-l ft-12 mgt-12'>申请时间：{dayjs(update_time).format('YYYY-MM-DD HH:mm:ss')}</div>
            </div>
            <div className='flex-center'>
                <Button className='button-large mgt-24' type='primary' onClick={() => {hide()}}>
                    我知道了
                </Button>
            </div>
        </div>
    )
}

export default forwardRef((props, ref) => (
    <CustomizeModal title="申请进度" ref={ref} >
        <ProcessContent {...props} />
    </CustomizeModal>
))